<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/24
  Time: 21:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ms-controller</title>
    <script type="text/javascript" src="../avalon/avalon_1.5.js"></script><%--引入js文件--%>
    <script>
        /*重新定义表达式界定符把默认的{{}}改为[[]]*/
/*        avalon.config({
            interpolate: ["[[","]]"]
        });*/
        avalon.ready(function () {//页面所有DOM元素加载完毕后再执行回调函数里面的业务逻辑
            avalon.define({
                $id: "A",
                name: "liger",
                color: "green"
            });
            avalon.define({
                $id: "B",
                name: "sphinx",
                color: "red"
            });
            avalon.define({
                $id: "C",
                name: "sphinxC",
            });
            avalon.define({
                $id: "D",
                name: "sphinxD",
            });
            avalon.scan();
        });
    </script>
</head>
<body>
    <div ms-controller="A"><%--model与view的绑定--%>
        <div>{{name}} : {{color}}</div><%--插值表达式将model里面的值填充到html中--%>
        <div ms-controller="B">
            <div>{{name}} : {{color}}</div>
            <div ms-controller="C"><%--当自己没有相关属性的时候会去查找父级的相关属性填充--%>
                <div>{{name}} : {{color}}</div>
            </div>
            <div ms-important="D"><%--不会向父级查找相关属性--%>
                <div>{{name}} : {{color}}</div>
            </div>
            <div ms-skip="B"><%--不应用个任何viewModel属性--%>
                <div>{{name}} : {{color}}</div>
            </div>
        </div>
    </div>
</body>
</html>
